<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>

        const arr = Array.from({ length: 10000 }, (v, i) => i);

        const render = (item, index) => {
            const body = document.body;
            const div = document.createElement('div');
            div.innerText = item;
            body.appendChild(div);
        }

        function wookloop(datas, tashHander) {
            // 参数归一化
            if (typeof datas === 'number') {
                datas = { length: datas };
            }

            if (!datas.length) return;

            let index = 0;

            function loop(deadline) {
                while (index < datas.length && deadline.timeRemaining() > 1) {
                    tashHander(datas[index], index);
                    index++;
                }

                if (index < datas.length) {
                    requestIdleCallback(loop);
                }
            }

            requestIdleCallback(loop);
        }

        wookloop(arr, render);
    </script>
</body>

</html>
</script>
</body>

</html>